<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
		    <block slot="content">商家详情</block>
		</cu-custom>
		<view class="slide_head">
			<swiper class="screen-swiper" :class="'round-dot slide_img'" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in merchant_detail.slides"  :key="index">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="head_container">
		  <!-- 红色区域 -->
		  <view class="red-area">
			<text class="label">消费均价</text>
			<text class="text-price">{{merchant_detail.aver_price || 0}}</text>
			<!-- <text class="or_price">￥99</text> -->
		  </view>
		  <!-- 黄色区域 -->
		  <view class="yellow-area">
			<text class="label">累计组局 {{merchant_detail.order_count ||　0}}次</text>
		  </view>
		</view>
		
		<!-- 商家信息 -->
		<view class="shop_info flex align-center justify-between">
			<view class="flex ">
				<image class="shop_thumb" src="https://img.js.design/assets/img/62f0aef474d3ef5536d73437.png" mode="aspectFit"></image>
				<view>
					<view class="shop_name">{{merchant_detail.name || ''}}</view>
					<view class="shop_address">{{merchant_detail.address_detail || ''}}</view>
				</view>
			</view>
			<view>
				<view class="flex align-center">
					<view :class="merchant_detail.is_open ? 'shop_open' : 'shop_close'">{{merchant_detail.is_open ? '营业中' : '休息中'}}</view>
					<!-- <view class="shop_time">24h</view> -->
				</view>
				<view class="shop_distance"><i class="cuIcon-locationfill icon_distance"></i>  3.5Km </view>
			</view>
		</view>
		
		<!-- 热门卡座 -->
		<view class="hot_room">
			<view class="flex hot_title align-center">
				<image class="hot_logo" src="../../static/images/detail/hot_game.png" mode="aspectFit"></image>
				<view class="hot_name">热门卡座</view>
			</view>
			<view class="hot_room_item">
				<view class="cu-list grid col-3 no-border" v-if="merchant_detail.cassette">
				    <view class="cu-item text-center room_item"  v-for="(item,index) in merchant_detail.cassette" :key="index">
				        <image :src="item.thumb" class="room_thumb" mode="aspectFill"></image>
				        <text class="text-bold">{{item.name}}</text>
						<view class="flex align-center justify-around">
							<view class="text-price">{{item.price}} / <span>小时</span></view>
							
						</view>
						<view class="room_nums">上限{{item.max_num}}人组局</view>
				    </view>
					
				</view>
			</view>
		</view>
		
		<!-- 组局流程 -->
		<view class="hot_room">
			<view class="flex hot_title align-center">
				<view class="hot_name">组局流程</view>
			</view>
			<view class="hot_room_item">
				<view class="flex align-center justify-between">
					<view class="group_item">
						<view>开启组局</view>
						<view><span class="text-red">1</span>人开局</view>
					</view>
					<view class="flex">
						<i class="cuIcon-right"></i>
						<i class="cuIcon-right"></i>
					</view>
					<view class="group_item">
						<view>分享Ta人</view>
						<view><span class="text-red">匹配</span>成功</view>
					</view>
					<view class="flex">
						<i class="cuIcon-right"></i>
						<i class="cuIcon-right"></i>
					</view>
					<view class="group_item">
						<view>联系商家</view>
						<view><span class="text-red">开局</span>成功</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 组局中 -->
		<view class="hot_room">
			<view class="flex hot_title align-center justify-between">
				<view class="hot_name">2人正在组局，可直接参与</view>
				<view class="more_title">更多组局 <i class="cuIcon-right margin-left-xs"></i></view>
			</view>
			<view class="hot_room_item">
				<block v-if="merchant_detail.order">
					<view class="group_items" v-for="(item,index) in merchant_detail.order"  :key="index">
						 <view class="flex">
							 <image class="group_items_thumb margin-right-sm " :src="item.avatar" mode="aspectFill"></image>
							 <view>
								 <view class="text-sm margin-bottom-xs">{{item.cassette.name}}</view>
								 <view class="text-sm text-gray">{{item.start_time}}</view>
							 </view>
						 </view>
						 <view class="flex align-center">
							 <view class="text-center margin-right-sm">
								 <view class="text-sm margin-bottom-xs">还差 <span class="text-red">{{ (item.max_people - item.join_people) || 0 }}</span> 人匹配成功</view>
								 <view class="text-sm text-gray">剩余  {{item.left_time}}</view>
								 <uni-countdown color="#000"  :day="item.timer.day" :hour="item.timer.hour" :minute="item.timer.minute" :second="item.timer.second"></uni-countdown>
								
							 </view>
							 <view class="join_group">去参加</view>
						 </view>
					</view>
				</block>			
			</view>
		</view>
		
		<!-- 历史成员 -->
		<view class="hot_room flex justify-between align-center">
			<view class="cu-avatar-group" v-if="merchant_detail.members.length > 0">
			     <image  v-for="(item,index) in merchant_detail.members" :key="index" class="cu-avatar round lg" :src="item.avatar"   mode="aspectFill"></image>
			</view>
			<view class="more_title">查看历史成员 <i class="cuIcon-right margin-left-xs"></i></view>
		</view>
		
		<!-- 组局须知 -->
		<view class="hot_room">
			<view class="flex hot_title align-center">
				<view class="hot_name">组局须知</view>
			</view>
			<view class="hot_room_item">
				<view class="rule_content">
					请遵守国家法律、包间内禁止黄赌毒、保持干净卫生
				</view>
			</view>
		</view>
		
		<view style="height: 150rpx;"></view>
		<view class="cu-bar bg-white tabbar border shop foot">
		   
		    <view class="action"  @click="back_to_index">
		        <view class="cuIcon-home"></view> 首页
		    </view>
			<button class="action" open-type="contact">
			    <view class="cuIcon-service"></view>客服
			</button>
		    <view class="action">
		        <view class="cuIcon-phone" @click="make_phone"></view>联系商家
		    </view>
		    <view class="btn-group">
		        <button class="cu-btn start_group  round shadow-blur" @click="start_group" >免费组局</button>
		    </view>
		</view>

	</view>
</template>

<script>
	import { getMechantDetail } from '@/api/merchant.js';
	export default {
		data() {
			return {
				merchant_detail : {
					members : [],
					cassette : [],
					order : [],
					slides : []
					
				}, 
				swiperList: [],
			}
		},
		onLoad(option) {
			let id = option.id
			if(!id){
				// uni.navigateBack();
			}
			this.fetch_merchat_detail(id);
		},
		methods:{
			make_phone(){
				if(this.merchant_detail.mobile){
					uni.makePhoneCall({
						phoneNumber:this.merchant_detail.mobile
					})
				}
			},
			fetch_merchat_detail(id){
				//商家详情
				getMechantDetail(id).then(res=>{
					this.merchant_detail = res.data
				})
			},
			back_to_index (){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			start_group (){
				//开始组局
				uni.navigateTo({
					url:'/pages/shop/start_group?mid='+this.merchant_detail.id
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		background: rgb(241,241,241);
		height: 100%;
	}
	.slide_head{
		width: 100%;
	}
	.slide_head .slide_img{
		height: 600rpx;
	}
	.head_container {
	  display: flex;
	  height: 82rpx; /* 根据需要调整高度 */
	  overflow: hidden; /* 隐藏超出部分 */
	}
	
	.red-area {
	  flex: 1;
	  background: linear-gradient(90deg, rgba(255, 132, 3, 1) 0%, rgba(254, 60, 50, 1) 100%); /* 红色 */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	  color: #fff;
	  font-size: 24rpx;
	}
	
	.red-area .label {
		margin-right: 10rpx;
	}
	.red-area .or_price{
		font-size: 20rpx;
		text-decoration: line-through;
	}
	
	.red-area::after {
	  content: '';
	  position: absolute;
	  right: -30px; /* 控制三角形的位置 */
	  top: 0;
	  width: 0;
	  height: 0;
	  border-top: 20px solid transparent; /* 上半部分三角形 */
	  border-bottom: 30px solid transparent; /* 下半部分三角形 */
	  border-left: 30px solid rgba(254, 60, 50, 1); /* 三角形宽度和颜色 */
	}
	
	.yellow-area {
	  flex: 1;
	  background-color: rgba(255, 228, 95, 1); /* 黄色 */
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  color: rgba(228, 59, 62, 1);
	  font-size: 26rpx;
	}
	.shop_info {
		padding-top: 10rpx;
		padding-bottom: 36rpx;
		padding-left: 32rpx;
		padding-right: 22rpx;
		background-color: #fff;
	}
	.shop_info .shop_thumb{
		width: 80rpx;
		height: 71rpx;
		margin-right: 16rpx;
	}
	.shop_info .shop_name{
		font-size: 28rpx;
		color:  rgba(51, 51, 51, 1);
		font-weight: bold;
		margin-bottom: 5rpx;
	}
	.shop_info .shop_address{
		color: rgba(102, 102, 102, 1);
		font-size: 22rpx;
	}
	.shop_info .shop_open{
		background: rgba(228, 59, 62, 1);color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;border: 1rpx solid rgba(228, 59, 62, 1);border: none;
	}
	.shop_info .shop_close{
		background: #ccc;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;border: none
	}
	.shop_info .shop_time{
		background-color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;border: 1rpx solid rgba(228, 59, 62, 1);color: rgba(228, 59, 62, 1);
	}
	.shop_info  .shop_distance{
		color: rgba(102, 102, 102, 1);
		font-size: 20rpx;
		margin-top: 10rpx;
	}
	.shop_info .icon_distance{
		color: rgba(228, 59, 62, 1);
		font-size: 30rpx;
	}
	.hot_room{
		background-color: #fff;
		padding: 18rpx;
		margin-top: 10rpx;
	}
	.hot_room .hot_title{
		border-bottom: 1rpx solid rgba(238, 238, 238, 1);
		padding-bottom: 15rpx;
	}
	.hot_room .hot_logo{
		width: 30rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}
	.hot_room .hot_name{
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: bold;
	}
	.hot_room .hot_room_item{
		padding: 32rpx 20rpx;
	}
	.room_item{
		padding: 0;
	}
	.hot_room_item .cu-item{
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.room_thumb{
		border-radius: 10rpx;
		width: 170rpx;
		height: 140rpx;
	}
	.hot_room_item .text-price{
		color: rgba(228, 59, 62, 1);
		font-size: 26rpx;
	}
	.hot_room_item .room_nums{
		font-size: 14rpx;
		color: rgba(128, 128, 128, 1);;
	}
	.group_item{
		border:  1rpx dashed rgba(191, 191, 191, 1);
		border-radius: 22rpx;
		padding: 15rpx 30rpx;
		font-size: 25rpx;
		line-height: 1.5;
		color: rgba(102, 102, 102, 1)
	}
	.more_title{
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
	}
	.group_items{
		display: flex;
		justify-content: space-between;
		padding: 14rpx 0;
		padding-right: 0;
		padding-bottom: 26rpx;
	}
	.group_items_thumb{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	.join_group{
		border-radius: 46rpx;
		background: rgba(254, 94, 41, 1);
		color: #fff;
		font-size: 20rpx;
		padding: 15rpx 30rpx;
	}
	.rule_content{
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
		line-height: 1.6;
		padding-bottom: 25rpx;
	}
	.start_group{
		width: 100%;background: rgba(254, 94, 41, 1);color: #fff;padding: 40rpx;
	}
</style>